<template>
  <view class="info-list">
    <pane-card v-for="(item, index) in infoList" :key="index">
      <view slot="title" class="message">
        <img src="../../static/img/bell.png" alt="" />
        <text class="title">{{ item.message }}</text>
      </view>
      <view slot="subtitle" class="time">
        <img src="../../static/img/clock.png" alt="" />
        <text class="block">{{ item.time }}</text>
      </view>
    </pane-card>
    <v-empty :isShow="showEmpty" text="暂无相关记录"></v-empty>
  </view>
</template>
<script>
import PaneCard from '@/components/m-card/pane-card.vue';
import VEmpty from '@/components/v-empty/index.vue';
import Api from '@/api/main';
export default {
  components: {
    PaneCard,
    VEmpty
  },
  data() {
    return {
      showEmpty: false,
      infoList: [
        // {
        //   message: 'xxxx采样已做完，需要进行收样工作',
        //   time: '2021-03-24 22:32'
        // },
        // {
        //   message: 'xxxx采样已做完，需要进行收样工作',
        //   time: '2021-03-24 22:32'
        // },
        // {
        //   message: 'xxxx采样已做完，需要进行收样工作',
        //   time: '2021-03-24 22:32'
        // }
      ]
    };
  },
  methods: {
    async getList() {
      uni.showLoading({
        title: '加载中...'
      });
      const res = await this.$http.post(Api.getNoticeList);
      this.infoList = res || [];
      this.infoList = this.infoList.slice(0, 100)
      this.showEmpty = !this.infoList.length;
      console.log('infoList', this.infoList);
      uni.hideLoading();
    }
  },
  created() {
    this.getList();
  }
};
</script>
<style lang="scss">
.info-list {
  width: 100%;
  padding: 20rpx 40rpx;
  img {
    width: 38rpx;
    height: 38rpx;
    margin-right: 8rpx;
  }
  .time,
  .message {
    display: flex;
    align-items: center;
  }
}
</style>
